<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .page {
            height: 100vh;
            background-color: #000;
        }

        /* 响应式布局 网页可以响应设备 宽度 不能写死 一般用相对单位 */
    </style>
</head>

<body>
    <!-- 让html标签有更多语义传达出来 -->
    <div class="page">
        <!-- html5 语义化标签 
            1. 和div一样做盒子 
            2. 可读性强
            3. 爬虫 有利于搜索引擎分析网页 语义化好 
        -->
        <header class="header"></header>
        <nav class="nav">导航栏</nav>
        <main class="main">
            <article class="article">

                <section class="contend">
                    <h1>文章标签</h1>
                    <p></p>
                </section>
                <section class="comments">

                </section>
            </article>
            <aside class="aside">
                侧边栏标签
            </aside>
        </main>
        <footer class="footer"></footer>
    </div>
</body>

</html>